<template>
    <div>
        <a-modal
        v-model:visible="printVisible"
        title="打印考核表"
        @ok="printVisible = false"
        @cancel="printVisible = false"
        width="100%"
        wrapClassName="full-modal"
        >
        <div id="printTest" v-if="printVisible">
            <div v-for="(item,index) in list" :key="index">
                <div style="text-align: center;"><h1 style="font-weight: 600 !important;">审评专家评价</h1></div>
                <table border="1" style="width: 100%;">
                    <tr>
                        <th>企业名称</th>
                        <td colspan="2">{{ item.sqsx.fqymc }}</td>
                        <th>审评范围</th>
                        <td colspan="3">{{ item.sqsx.fcyjcfw }}</td>
                    </tr>
                    <tr>
                        <th>审评类型</th>
                        <td colspan="2">{{ item.sqsx.fjclx }}</td>
                        <th>技术审评时间</th>
                        <td colspan="3"><span v-if="item.sqsx.fcykssj && item.sqsx.fcyjssj">{{ item.sqsx.fcykssj }}至{{ item.sqsx.fcyjssj }}</span></td>
                    </tr>
                    <tr>
                        <th style="width: 14%;">审评组成员</th>
                        <th style="width: 14%;">廉洁自律情况</th>
                        <th style="width: 14%;">严格按方案进行 技术审评</th>
                        <th style="width: 14%;">能发现所负责的职责范 围内存在的缺陷情况</th>
                        <th style="width: 14%;">技术审评报告涵盖全部发 现问题，缺陷描述清晰、 具体，按风险评定原则对 缺陷分级且科学合理</th>
                        <th style="width: 14%;">技术审评作业（或笔录） 清 晰 、 可 追 溯 检 查 过 程，能与审评报告中发 现的问题和现场情况相 对应</th>
                        <th style="width: 14%;">综合评价</th>
                    </tr>
                    <tr v-for="term in item.cyxpjlList" :key="term.id">
                        <td v-if="term.fssk == '组长库' || term.fssk == '组员库'">
                            <span>{{ term.fssk == '组长库'?'组长：':'组员：' }}</span>
                            <span>{{ term.fjcyxm }}</span>
                        </td>
                        <td v-if="term.fssk == '组长库' || term.fssk == '组员库'">
                            <div class="term-box" v-for="nape in plainOptions">
                                <span class="term-value">{{ nape.value }}</span>
                                <span v-if="term.fljzlqk == nape.value">☑</span>
                                <span class="no-select" v-else>☐</span>
                            </div>
                        </td>
                        <td v-if="term.fssk == '组长库' || term.fssk == '组员库'">
                            <div class="term-box" v-for="nape in plainOptions">
                                <span class="term-value">{{ nape.value }}</span>
                                <span v-if="term.fzdjcqd == nape.value">☑</span>
                                <span class="no-select" v-else>☐</span>
                            </div>
                        </td>
                        <td v-if="term.fssk == '组长库' || term.fssk == '组员库'">
                            <div class="term-box" v-for="nape in plainOptions">
                                <span class="term-value">{{ nape.value }}</span>
                                <span v-if="term.fhdqxqk == nape.value">☑</span>
                                <span class="no-select" v-else>☐</span>
                            </div>
                        </td>
                        <td v-if="term.fssk == '组长库' || term.fssk == '组员库'">
                            <div class="term-box" v-for="nape in plainOptions">
                                <span class="term-value">{{ nape.value }}</span>
                                <span v-if="term.fxcjcqxfj == nape.value">☑</span>
                                <span class="no-select" v-else>☐</span>
                            </div>
                        </td>
                        <td v-if="term.fssk == '组长库' || term.fssk == '组员库'">
                            <div class="term-box" v-for="nape in plainOptions">
                                <span class="term-value">{{ nape.value }}</span>
                                <span v-if="term.fxcjczy == nape.value">☑</span>
                                <span class="no-select" v-else>☐</span>
                            </div>
                        </td>
                        <td v-if="term.fssk == '组长库' || term.fssk == '组员库'">
                            <div class="term-box" v-for="nape in plainOptions">
                                <span class="term-value">{{ nape.value }}</span>
                                <span v-if="term.fzhpj == nape.value">☑</span>
                                <span class="no-select" v-else>☐</span>
                            </div>
                        </td>
                    </tr>
                </table>
                <div style="display: flex;justify-content: space-evenly;margin: 10px ;">
                    <div>
                        评价人：
                        <img :src="item.HandledBy" alt="" style="height: 50px;"/>
                    </div>
                    <div>
                        复核人：
                        <img :src="item.ReviewedBy" alt="" style="height: 50px;"/>
                    </div>
                </div>
                <p>
                    <span>填表说明：</span>
                    <span>
                        1.本表由中心各科人员员在每次审评结束后对审评组成员进行考评。 2.综合评价”判定原则为：档次占比超过 50%的，本次综合评价按该档次进行评定。
                    </span>
                </p>
                <!--强行换页-->
                <div style="page-break-after:always"></div>
            </div>
            <!-- <div style="width: 100%; border: 1px solid blueviolet; height: 990px;">

            </div> -->

            <!-- <div style="width: 100%; border: 1px solid blueviolet; height: 990px;">
            </div>       -->
        </div>

        <div style="display: flex;justify-content: center;margin: 20px;">
            <a-button type="primary" v-print="printObj">打印</a-button>
        </div>
        </a-modal>
    </div>
</template>
<script>
import { checkArray, shifou } from "@/views/everydayCheck/common/GroupConfig";
export default {
    components:{

    },
    props:{

    },
    data(){
        return{
            plainOptions:checkArray,
            printVisible:false,
            list:[],
            printObj:{
                id:"printTest", //需要打印的id名称
                popTitle:"问卷调查",//文档的名称
                // preview:true,//预览功能，不好用
                zIndex:'20002',
                beforeOpenCallback(vue){
                    //console.log('打印回调',vue)
                },
                openCallback (vue) {//打开之前
                    //console.log('打开之前',vue)
                },
                closeCallback (vue) {//关闭了打印工具
                    //console.log('关闭了打印工具')
                },

            },
        }
    },
    watch:{

    },
    mounted(){

    },
    methods:{
        getData(val){//在父组件调用次方法
            this.printVisible = true
            this.list = val
            //console.log(val)
        },
    }
}
</script>
<style lang="less">
.full-modal {
  .ant-modal {
    max-width: 100%;
    top: 0;
    padding-bottom: 0;
    margin: 0;
  }
  .ant-modal-content {
    display: flex;
    flex-direction: column;
    height: calc(100vh);
    overflow-y: auto;
  }
  .ant-modal-body {
    flex: 1;
  }
}
th,td{
    padding: 10px;
}
.term-box{
    display: flex;
    align-content: center;
    .term-value{
        padding-right: 5px;
    }
    .no-select{
        line-height: 1;
        font-size: 20px;
    }
}

</style>
